<template>
<div class="share_container" :class="{noWorksheetId: worksheetId === 'null'}">
  <div style="height: 100%" class="appPage" v-if="worksheetId !== 'null'">
    <div class="content flex-col" v-if="pageType === 0">
      <div class="table-content">
        <transition name="slide-fade">
          <div v-if="editorVisible" class="table-header-editor">
            <div>
              <span v-if="!batchData.isAll" class="table-title">已选中本页{{batchData.rows.length || 0}}条记录</span>
              <span v-if="batchData.isAll" class="table-title">已选中“全部”{{page.totalCount}}条记录</span>
              <el-checkbox v-if="batchData.selectAll" v-model="batchData.isAll">选择全部记录</el-checkbox>
            </div>
            <div>
              <el-button @click="handleUpdate" icon="el-icon-edit" type="text" style="margin-left: 5px" >
                编辑
              </el-button>
              <el-button @click="handleDelete" icon="el-icon-delete" type="text" style="color: red" >
                删除
              </el-button>
            </div>
          </div>
        </transition>
        <div class="table-header flex-row">
          <div class="table-view flex-row">
            <span class="table-title">{{name}}</span>
            <!-- <el-dropdown @command="handleCommand">
              <el-button icon="el-icon-more" type="text" style="color: #9d9d9d" ref="toolButton">
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="editForm">编辑表单</el-dropdown-item>
                <el-dropdown-item command="rename">修改名称</el-dropdown-item>
                <el-dropdown-item command="changeIcon">修改图标</el-dropdown-item>
                <el-dropdown-item command="move" divided>移动至</el-dropdown-item>
                <el-dropdown-item command="import" divided>从Excel导入数据</el-dropdown-item>
                <el-dropdown-item command="export">导出至Excel</el-dropdown-item>
                <el-dropdown-item command="delete" divided style="color: red">
                  删除工作表
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
          <div class="table-function">
            <a-input v-model="searchInput" @pressEnter="handleSearch" @blur="handleSearchInputBlur" v-show="searchInputVisible" size="mini" style="width: 200px" placeholder="输入关键字并按下回车搜索"/>
            <a-tooltip>
              <template slot="title">搜索</template>
              <a-button @click="searchInputVisible = !searchInputVisible" type="primary" class="bt-style themeButton" icon="search" shape="circle" />
            </a-tooltip>
            <a-tooltip>
              <template slot="title">筛选</template>
              <a-popover placement="bottom" trigger="click">
                <div slot="content" class="table-filter">
                  <div class="filter-head">
                    <span>筛选</span>
                    <a-button @click="getTableData" style="margin-left: 200px" v-show="filters.length > 0" size="small">确定</a-button>
                    <el-button icon="el-icon-plus" type="text" @click="handleAddFilter"></el-button>
                  </div>
                  <div class="filter-item" v-for="(list, index) in filters" :key="list.uuid">
                    <filter-div
                      :fields='tableConfigData.fields' 
                      :filter='list'
                      :index='index'
                      @deleteFilter='handleDeleteFilter'
                      @spliceChange='handleSpliceChange'
                    />
                  </div>
                </div>
                <a-button type="primary" class="bt-style themeButton" icon="filter" shape="circle" />
              </a-popover>
            </a-tooltip>
            <!-- <el-button class="themeButton" icon="el-icon-plus" round size="mini" @click="showAddRowModal">
              记录
            </el-button> -->
          </div>
        </div>
        <a-menu v-model="viewValue" mode="horizontal" @click="viewMenuVisible = false">
          <!-- <a-tooltip>
            <template slot="title">添加视图</template>
            <a-icon type="plus" @click="handleAddView" style="cursor: pointer; margin-right: 10px"/>
          </a-tooltip> -->
          <a-menu-item key="all">全部</a-menu-item>
          
          <a-menu-item v-for="item in tableConfigData.viewList" :key="item.id">
            <span>{{item.name}} <a-icon @click.stop="viewMenuVisible = true" type="caret-down" style="margin:0" v-show="viewValue[0] === item.id"/></span>
            <div class="view-dropdown" v-show="viewValue[0] === item.id && viewMenuVisible">
              <ul>
                <li @click="() => handleViewClick('editor', item)">配置视图</li>
                <li @click="() => handleViewClick('delete', item)" style="color: red">删除视图</li>
              </ul>
            </div>
          </a-menu-item>
        </a-menu>
      </div>
      <div class="tenant-content tenant-table" ref="tenantTable">
        <ux-grid
          ref="plxTable"
          show-header-overflow="ellipsis"
          :checkboxConfig="{highlight: true}"
          :sort-config="{trigger: 'cell'}"
          @selection-change="handleSelectionChange"
          @select="handleSelect"
          @select-all="handleSelectAll"
          @sort-change="handleTableSort"
          @row-click="handleRowClick"
          :height="height"
        >
          <!-- <ux-table-column type="checkbox" width="50" fixed="left" style="padding-left: 10px"/> -->
          <ux-table-column style="text-align: center" type="index" width="50" fixed="left"/>
          <ux-table-column
              v-for="item in tableConfigData.fields"
              :key="item.name"
              :field="item.name"
              :title="item.alia"
              :resizable="true"
              :remote-sort="true"
              min-width="200px"
            >
              <template v-slot="scope" v-if="item.dataType === DataType.TEXT || item.dataType === DataType.TEXT_AREA">
                <table-input :editor="false" v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name"/>
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.NUMBER">
                <table-input-number :editor="false" v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name"/>
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.SELECT || item.dataType === DataType.RADIO">
                <table-select :editor="false" v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name" :opintdata="item.options.optionItems" style="width: 100%; height: 30px"/>
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.DATE">
                <table-date-time :editor="false" v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name" :format="item.options.format" :valueFormat="item.options.valueFormat"/>
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.UPLOAD_FILE">
                <table-upload-file v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name"/>
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.CHECK_BOX">
                <!-- <table-check-box v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name" :opintdata="item.options.optionItems" style="width: 100%; height: 30px"/> -->
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.UPLOAD_IMG">
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.CURLOC">
                <table-cur-loc v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name"/>
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.MEMBER">
                <table-member v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name"/>
              </template>
              <template v-slot="scope" v-else-if="item.dataType === DataType.CURRENTTIME">
                <table-current-time v-model="scope.row[item.name]" :rowId="scope.row.rowId" :fieldName="item.name"/>
              </template>
          </ux-table-column>
      </ux-grid>
      </div>
      <div v-show="!editorVisible" class="tenant-footer">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageChange"
          :current-page="page.pageNo"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalCount"
          popper-class="appPage-table-dropdown">
        </el-pagination>
      </div>
      <add-row-modal :visible="addRowModalVisible" v-if="addRowModalVisible" :worksheetId="worksheetId" @close="closeAddRowModal" @success="getTableData"></add-row-modal>
      <update-row-modal :visible="updateRowModalVisible" v-if="updateRowModalVisible" :worksheetId="worksheetId" :rowId="rowId" @close="closeUpdateRowModal" @success="getTableData"></update-row-modal>
      <get-row-modal :visible="getRowModalVisible" v-if="getRowModalVisible" :worksheetId="worksheetId" :rowId="rowId" @close="closeGetRowModal"></get-row-modal>
      <batch-update-row-modal :visible="batchUpdateModalVisible" 
        v-if="batchUpdateModalVisible" 
        @close="closeBatchUpdateRowModal" 
        @success="handleBatchUpdate"
        :fields="tableConfigData.fields"
      />
    </div>
    <a-drawer class="table-drawer"
        placement="right"
        :visible="viewConfigVisible"
        :get-container="false"
        :wrap-style="{ position: 'absolute' }"
        :mask-style="{ background: 'transparent' }"
        width="500"
        @close="viewConfigVisible = false"
    >
      <!-- <a-input></a-input> -->
      {{viewData.name}}
    </a-drawer>
      
    <div class="content flex-col" v-if="pageType === 1">
      <div class="table-header flex-row">
        <div class="table-view flex-row">
          <span class="table-title">{{name}}</span>
          <!-- <el-dropdown @command="handleCommand">
            <el-button icon="el-icon-more" type="text" style="color: #9d9d9d"  ref="toolButton">
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="editForm">编辑页面</el-dropdown-item>
              <el-dropdown-item command="rename">修改名称</el-dropdown-item>
              <el-dropdown-item command="changeIcon">修改图标</el-dropdown-item>
              <el-dropdown-item command="move" divided>移动至</el-dropdown-item>
              <el-dropdown-item command="delete" divided style="color: red">
                删除自定义页面
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          
          <div class="tableViewToolContainer">
              <a-tooltip>
                <template slot="title">全屏</template>
                <i class="iconfont cgsIcon-quanping1 iconTool tableTool" @click="fullScreen"></i>
              </a-tooltip>
          </div>
        </div>
      </div>
      <div class="tenant-content tenant-table" ref="custonWebContainer">
        <custom-web-content ref="customComponentContent" :key="worksheetId" :gridItemConfig="tableConfigData.config" :staticGrid="true" :shared="true" :fullSceenAbled="customComponentFullSceenAbled"></custom-web-content>
      </div>
    </div>
    <el-dialog
        :title="dialogData.title"
        :visible.sync="dialogData.visible"
        width="30%"
        @close="dialogData.visible = false">
        <el-form :model="formData" ref="appForm" :rules="rules" label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleOK">确定</el-button>
                <el-button @click="dialogData.visible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    
    <move-table-modal :pageType="pageType"
      :visible="moveTableModalVisible" 
      v-if="moveTableModalVisible" 
      @close="moveTableModalVisible = false" 
      @success="moveSuccess"
    />

    <import-excel-data
      ref="excelModal"
      :visible="excelVisible"
      :fields="tableConfigData.fields"
      @cancel="excelVisible = false"
      @ok="handleExcelOk"
    />
    <select-icon v-if="iconModalConfig.visible" :top="iconModalConfig.top" :left="iconModalConfig.left" activeType="icon" :iconName="icon" @changeIcon="changeIcon" @close="closeIconModal"></select-icon>
  </div>
  <div class="appPage" v-else>
    当前分组没有应用项，新建或从其他分组移动应用项。
  </div>
</div>
  
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'
import {getWorksheetGroupDetail} from"@/api/app"
import { 
  getShareWorksheetDetail,
  getShareFilterDataList,
  updateWorksheet,
  deleteWorksheet,
  deleteRow,
  updateRowBatch,
  deleteRowBatch,
  importExcel,
  exportExcel,
  addView,
  deleteView,
  } from "@/api/worksheet";
import {DataType, FilterType, DateRange} from '../../filterConstant'
import addRowModal from "./modal/addRowModal.vue"
import updateRowModal from "./modal/updateRowModal.vue"
import getRowModal from "./modal/getRowModal.vue"
import batchUpdateRowModal from "./modal/batchUpdateRowModal.vue"
import FilterDiv from "../components/filter.vue"
import customWebContent from "@/page/customWeb/content.vue"
import importExcelData from "./modal/importExcel.vue"
import MoveTableModal from './modal/moveTableModal.vue';
import selectIcon from "./selectThemeIcon.vue";
import TableInput from "./components/tableInput.vue"
import TableInputNumber from "./components/tableInputNumber.vue"
import TableSelect from "./components/tableSelect.vue"
import TableCheckBox from "./components/tableCheckBox.vue"
import TableDateTime from "./components/tableDatetime.vue"
import TableUploadFile from "./components/tableUploadFile.vue"
import TableCurLoc from "./components/tableCurLoc.vue"
import TableMember from "./components/tableMember.vue"
import TableCurrentTime from "./components/tableCurrentTime.vue"

import { getOffset } from "@/util/util.js"
import { defaultIcon_worksheet } from "@/util/LOGO_ICON_CONFIG"

export default {
  name: "share",
  components: {
    TableInput,
    TableInputNumber,
    TableSelect,
    TableCheckBox,
    TableDateTime,
    TableUploadFile,
    TableCurLoc,
    TableMember,
    TableCurrentTime,
    addRowModal,
    updateRowModal,
    getRowModal,
    batchUpdateRowModal,
    customWebContent,
    importExcelData,
    MoveTableModal,
    FilterDiv,
    selectIcon
  },
  data() {
    return {
      DataType,
      erdm: null,
      addRowModalVisible: false,
      updateRowModalVisible: false,
      getRowModalVisible: false,
      batchUpdateModalVisible: false,
      moveTableModalVisible: false,
      excelVisible: false,
      viewMenuVisible: false,
      viewConfigVisible: false,
      viewData: {
        name: '全部'
      },
      height: 600,
      searchInput: '',
      filters: [],
      searchInputVisible: false,
      editorVisible: false,
      viewValue: ['all'],
      tableConfigData: {
        viewList: [],
        fields: [],
      },
      page: {
        totalCount: 0,
        pageSize: 50,
        pageNo: 1
      },
      sortData:{
        sortField: null,
        isAsc: null
      },
      pageType: 0,
      rowId: null,
      dialogData: {
        title: '修改名称',
        visible: false
      },
      formData: {
        name: ''
      },
      batchData: {
        isAll: false,
        selectAll: false,
        rows: []
      },
      rules: {
        name: [
            { required: true, message: '请输入工作表名称', trigger: 'blur' }
        ]
      },
      multipleSelection: [],
      customComponentFullSceenAbled: true,
      fullscreen: false,
      iconModalConfig: {
        visible: false,
        top: 0,
        left: 0
      },
    };
  },
  computed: {
    name() {
      return this.tableConfigData?.name || ""
    },
    icon(){
      return this.tableConfigData?.icon || defaultIcon_worksheet
    },
    appId() {
      return this.$route.params.appId;
    },
    groupId() {
      return this.$route.params.groupId;
    },
    worksheetId() {
      return this.$route.params.worksheetId;
    },
    worksheetInfoList() {
      return this.$store.state.worksheetList
    },
  },
  methods: {
      handleRowClick(row){
        this.rowId = row.rowId
        this.getRowModalVisible = true
      },
      handleTableSort(option){
        let {order, prop} = option
        if(!order){
          this.sortData.sortField = null
          this.sortData.isAsc = null
        } else{
          this.sortData.sortField = prop
          this.sortData.isAsc = order === 'asc'
        }
        this.getTableData();
      },
      handleViewClick(type, item){
        if(type === 'editor'){
          this.viewConfigVisible = true
          this.viewData = item
        } else if (type === 'delete') {
          this.$confirm("此操作将永久删除该视图, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(async () => {
            await deleteView(item.id)
            this.viewValue = ['all']
            this.getList()
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        }
      },
      async handleAddView(){
        let data = await addView({
          name: '全部',
          viewType: 0,
          worksheetId: this.worksheetId
        })
        this.getList()
        // console.log(data);
        this.viewValue = [data.id]
        this.viewConfigVisible = true
      },
      async changeIcon(icon){
        let result = await updateWorksheet({
            icon: icon.iconName,
            id: this.worksheetId,
            type: this.pageType
        })
        if(result){
            this.iconModalConfig.visible = false
            this.$store.commit('updateWorksheetIcon', {id: this.worksheetId, icon: icon.iconName})
            this.$message.success('更新图标成功！')
        } else {
            this.$message.success('更新图标失败！')
        }
      },
      closeIconModal(){
        this.iconModalConfig.visible = false
      },
      createId(){
          return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
      },
      handleSpliceChange(type){
        this.filters = this.filters.map(c => {
          c.spliceType = type
          return c
        })
      },
      handleDeleteFilter(uuid){
        this.filters = this.filters.filter(c => c.uuid !== uuid)
        if(this.filters.length === 0){
          this.getTableData()
        }
      },
      handleAddFilter(){
        let spliceType = this.filters[0]?.spliceType || 0
        let field = this.tableConfigData.fields[0] || null
        let obj = {
          uuid: this.createId(),
          field: '',
          filterType: '',
          values: [],
          dateRange: null,
          spliceType,
          dataType: 0,
          value: 0
        }
        if(field){
          obj.field = field.name
          obj.dataType = field.dataType
          switch(field.dataType){
            case DataType.TEXT:
              obj.filterType = FilterType.INCLUDE
              break
            case DataType.NUMBER:
              obj.filterType = FilterType.EQUAL
              break
            case DataType.DATE:
              obj.filterType = FilterType.DATE_YES
              obj.dateRange = DateRange.TODAY
              break
          }
        }
        this.filters.push(obj)
      },
      async moveSuccess(){
        this.moveTableModalVisible = false
        let data = await getWorksheetGroupDetail(this.groupId)
        let list = data?.worksheetInfoList || []
        this.$store.commit('updateWorksheetList', list)
        let worksheetId = list[0]?.id || null
        this.$router.push(`/app/${this.appId}/${this.groupId}/${worksheetId}`)
      },
      fullScreen(){
        // this.fullscreen = true
        let fullarea = this.$refs.custonWebContainer
        if (fullarea.requestFullscreen) {
            fullarea.requestFullscreen();
        } else if (fullarea.webkitRequestFullScreen) {
            fullarea.webkitRequestFullScreen();
        } else if (fullarea.mozRequestFullScreen) {
            fullarea.mozRequestFullScreen();
        } else if (fullarea.msRequestFullscreen) {
            // IE11
            fullarea.msRequestFullscreen();
        }
        this.$refs.customComponentContent.resize()
    },
    async handleBatchUpdate(formData){
      this.batchUpdateModalVisible = false
      // await updateRowBatch({
      //   rowIds: this.batchData.rows.map(r => r.rowId),
      //   worksheetId: this.worksheetId,
      //   isAll: this.batchData.isAll,
      //   data: {
      //     [formData.field]: formData.batchValue
      //   }
      // })
      
      // this.getTableData();
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    handleSelect(selectRows){
      this.editorVisible = selectRows.length !== 0
      this.batchData.selectAll = false
      this.batchData.isAll = false
      this.batchData.rows = selectRows
    },
    handleSelectAll(selectRows){
      this.editorVisible = selectRows.length !== 0
      this.batchData.selectAll = selectRows.length !== 0
      this.rows = selectRows
      this.batchData.rows = selectRows
    },
    handleExcelOk(wsData){
      let data = Object.assign(wsData, {
        worksheetId: this.worksheetId,
      })
      
      const form = this.$refs.excelModal.form
      this.excelVisible = false
      form.validateFields(async (errors, values) => {
        if (!errors) {
          data["values"] = values

          let res = await importExcel(data)
          if (res.errorData.length > 0) {
            this.$notification["error"]({
              message: `导入完成，${res.errorData.length} 条数据有误`,
              duration: null,
              placement: 'bottomRight',
              style: {
                width: '420px'
              },
              description: () => {
                const errorData = res.errorData
                let msg = ''
                for (let i = 0; i < errorData.length; i++) {
                  msg += errorData[i].errMsg + "\r\n"
                }
                return msg
              }
            });
          } else {
              this.$notification["success"]({
                message: `导入完成，共 ${res.fieldsData.length} 条，${res.fieldsData.length} 条成功`,
                duration: 5,
                placement: 'bottomRight'
              })
          }
          this.getTableData()
        } else {
          this.confirmLoading = false
        }
      })
    },
    closeAddRowModal(){
      this.addRowModalVisible = false
    },
    showAddRowModal(){
      this.addRowModalVisible = true
    },
    closeUpdateRowModal(){
      this.updateRowModalVisible = false
    },
    closeGetRowModal(){
      this.getRowModalVisible = false
    },
    closeBatchUpdateRowModal(){
      this.batchUpdateModalVisible = false
    },
    handleOK(){
        this.$refs['appForm'].validate(async (valid) => {
            if (valid) {
                await updateWorksheet({
                    name: this.formData.name,
                    id: this.worksheetId,
                    type: this.pageType
                })
                this.dialogData.visible = false
                this.$store.commit('updateWorksheetName', {id: this.worksheetId, name: this.formData.name})
            } else {
                return false;
            }
        });
    },
    async handleCommand(command) {
      if (command === "editForm") {
        let editType = ''
        if(this.pageType === 0){
          editType = 'vForm'
        } else {
          editType = 'customWeb'
        }
        this.$router.push(`/${editType}/${this.appId}/${this.groupId}/${this.worksheetId}`)
      } else if(command === "rename") {
        this.formData.name = this.name
        this.dialogData = {
          title: '修改名称',
          visible: true
        }
      } else if(command === "move") {
        this.moveTableModalVisible = true
      } else if(command === "import") {
        this.excelVisible = true
      } else if(command === "export") {
        const data = { worksheetId: this.worksheetId, filters: this.filters }
        let res = await exportExcel(data)
        const name = decodeURI(res.headers['content-disposition'].split(';')[1].split('filename=')[1])
        this.postDownload(res.data, name)
      } else if(command === "delete") {
        // deleteWorksheet
        this.$confirm("此操作将永久删除该表单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(async () => {
          await deleteWorksheet(this.worksheetId)
          this.$store.commit('deleteWorksheet', this.worksheetId)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      } else if(command === 'changeIcon'){
        this.iconModalConfig.visible = true;
        let element = this.$refs.toolButton.$el;
        let offset = getOffset(element)
        this.iconModalConfig.top = element.offsetHeight + offset.top;
        this.iconModalConfig.left = offset.left;
      }
    },
    postDownload (blob, filename) {
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // IE\
        window.navigator.msSaveBlob(blob, filename);
      } else {
        const URL = window.URL || window.webkitURL;
        const downloadUrl = URL.createObjectURL(blob);
        if (filename) {
          // use HTML5 a[download] attribute to specify filename
          const a = document.createElement('a');
          // safari doesn't support this yet
          if (typeof a.download === 'undefined') {
            window.location = downloadUrl;
          } else {
            a.href = downloadUrl;
            a.target = '_blank';
            a.download = filename;
            document.body.appendChild(a);
            a.click();
          }
        } else {
          window.location = downloadUrl;
        }
        setTimeout(() => { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
      }
    },
    async getList() {
      if(this.worksheetId === 'null') {
        this.name = ''
        this.tableConfigData = {
            viewList: [],
            fields: [],
        }
        if(this.$refs.plxTable){
          this.$refs.plxTable.reloadData([])
        }
        return
      }
      let data = await getShareWorksheetDetail(this.worksheetId)
      this.pageType = data.type
      this.tableConfigData = data
      if(this.pageType === 1 && 'config' in this.tableConfigData ){
        this.tableConfigData.config = this.tableConfigData.config === '' ? [] : JSON.parse(this.tableConfigData.config)
      } else {
        this.getTableData()
      }
    },
    async getTableData() {
      this.init()
      if(this.$refs.plxTable){
        this.$refs.plxTable.reloadData([])
      }
      let { pageNo, pageSize } = this.page;
      let { sortField, isAsc } = this.sortData;
      let data = await getShareFilterDataList({
        worksheetId: this.worksheetId,
        pageNo,
        pageSize,
        sortField,
        isAsc,
        filters: this.filters
      })
      this.page.totalCount = data?.totalCount || 0;
      this.$refs.plxTable.reloadData(data?.data || [])
      // this.$refs.plxTable.updateData()
    },
    async handleSearch() {
      let { pageNo, pageSize } = this.page;
      let { sortField, isAsc } = this.sortData;
      let data = await getShareFilterDataList({
        worksheetId: this.worksheetId,
        keywords: this.searchInput,
        pageNo,
        pageSize,
        sortField,
        isAsc
      })
      this.page.totalCount = data?.totalCount || 0;
      this.$refs.plxTable.reloadData(data?.data || [])
    },
    handleSearchInputBlur() {
      if(this.searchInput === "") {
        this.searchInputVisible = false
      }
      this.handleSearch()
    },
    pageSizeChange(value) {
      this.page.pageNo = 1;
      this.page.pageSize = parseInt(value);
      this.getTableData();
    },
    pageChange(value) {
      this.page.pageNo = value;
      this.getTableData();
    },
    handleUpdate() {
      if(this.batchData.rows.length === 1){
        this.rowId = this.batchData.rows[0].rowId
        this.updateRowModalVisible = true
      }else{
        this.batchUpdateModalVisible = true
      }
    },
    handleDelete() {
      let number = this.batchData.rows.length
      if(this.batchData.isAll){
        number = this.page.totalCount
      }
      this.$confirm(`此操作将永久删除${number}条数据, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
          if(number === 1){
            await deleteRow({
              rowId: this.batchData.rows[0].rowId,
              worksheetId: this.worksheetId
            })
          } else {
            await deleteRowBatch({
              rowIds: this.batchData.rows.map(r => r.rowId),
              worksheetId: this.worksheetId,
              isAll: this.batchData.isAll
            })
          }
          this.getTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    fullSceenChangeHandler(e){
        let _this = this
        _this.customComponentFullSceenAbled = !_this.customComponentFullSceenAbled
        if(_this.$refs.customComponentContent?.resize){
          setTimeout(() => {
                _this.$refs.customComponentContent.resize()
          }, 100)
        }
    },
    init(){
      this.batchData.isAll = false
      this.batchData.selectAll = false
      this.editorVisible = false
    }
  },
  watch: {
    $route(to, from) {
      this.pageType = 0
      if(to.params.worksheetId === from.params.worksheetId) return
      this.page.pageNo = 1;
      this.page.pageSize = 50;
      this.searchInput = '';
      this.sortData = {
        sortField: null,
        isAsc: null
      };
      this.getList();
    }
  },
  mounted() {
    if(this.worksheetId !== 'null'){
      this.page.pageNo = 1;
      this.page.pageSize = 50;
      this.getList();
      window.addEventListener('fullscreenchange', this.fullSceenChangeHandler);
      this.erdm = elementResizeDetectorMaker()
      let _this = this
      this.erdm.listenTo(this.$refs.tenantTable, element => {
        _this.height = element.offsetHeight - 2
        if(_this.$refs.plxTable){
          _this.$refs.plxTable.doLayout(true)
        }
      })
    }
  },
  beforeDestroy(){
    window.removeEventListener('fullscreenchange', this.fullSceenChangeHandler);
    if(this.erdm){
      this.erdm.removeAllListeners(this.$refs.tenantTable.$el)
    }
  }
};
</script>

<style lang="less">
.share_container{
  height: 100%;
  background: white;
  padding: 0 10px;
}
.noWorksheetId{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.appPage {
  .elx-table .elx-body--column.col--ellipsis, .elx-table .elx-footer--column.col--ellipsis, .elx-table .elx-header--column.col--ellipsis, .elx-table.elx-editable .elx-body--column{
    font-size: 14px;
  }
  // .elx-table .elx-body--column.col--ellipsis:not(.col--actived)>.elx-cell{
  //   overflow: visible;
  //   white-space: normal
  // }
  .elx-table td .elx-cell{
    padding: 0;
    width: 100% !important
  }
  .elx-table {
    .elx-body--column.col--checkbox, .elx-body--column.col--index{
      padding-left: 10px;
    }
  }
}
.appPage .el-checkbox__inner{
  border: 1px solid #a8abb1;
}
.appPage .el-table__fixed-right .el-table__fixed-body-wrapper{
  border-right: 1px solid;
}

.appPage .el-table td, .appPage .el-table th{
  padding: 0;
}

 .appPage input, .appPage .cgs-pag-total {
  color: #B4B4B4 !important
}
.appPage .el-pagination{
  float: right;
}
.appPage-table-dropdown{
  background-color: #fff;
  color: #ccc;
}
.appPage-table-dropdown .el-select-dropdown__item{
  color: #999;
}
.appPage-table-dropdown .el-select-dropdown__item.selected{
  color:#fff;
}
.appPage .el-pagination .el-input__inner{
  border-color: #ccc !important;
}
</style>
<style scoped lang="less">
.appPage{
  position: relative;
}
.appPage .table-view {
  flex: 1;
  align-items: center;
  position:relative;
}
.table-view .tableViewToolContainer{
  position: absolute;
  right: 5px;
}
.table-view .tableViewToolContainer .iconTool{
  font-size: 20px;
  font-weight: 700;
}

.table-view .tableViewToolContainer .tableTool:hover{
  color: #5cb6ff;
}
.appPage .table-function {
  width: 500px;
  line-height: 50px;
  text-align: right;

  .bt-style{
    margin: 0 2px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    font-size: 13px
  }
}
.appPage .table-title {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  margin-right: 5px;
}

.appPage .menu-icon {
  width: 30px;
  height: 30px;
  background-position: center;
  margin-top: 5px;
  margin-left: 5px;
  background-size: 50% 50%;
}
.appPage .tenant-header{
  width: 100%;
  height: 50px;
  /* font-family: PingFangSC-Semibold, PingFang SC; */
  text-shadow: 0 3px 5px rgba(7, 17, 39, 0.1);
  color: rgba(255, 255, 255, 0.6);
  line-height: 40px;
  flex: 0 0 72px;
  justify-content: space-between;
}
.appPage .tenant-header-left, .tenant-header-right{
  align-items: center;
}
.appPage .tenant-content{
  text-shadow: 0 3px 5px rgba(7, 17, 39, 0.1);
  flex: 1 1 auto;
}
.appPage .tenant-footer{
  padding:5px;
  width: 100%;
  /* height: 32px;
  flex: 0 0 32px; */
}
.appPage .tenant-table{
  background: #f5f5f5;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  overflow-y: auto;
}

.appPage .table-header-editor {
  position: absolute;
  background: #fff;
  z-index: 99;
  height: 80px;
  width: 100%;
  padding: 10px 0;
  /* display: flex;
  align-items: center; */
}
.appPage .table-header {
  position: relative;
  height: 50px;
  overflow: hidden;
}
.appPage .slide-fade-enter-active {
  transition: all .5s ease;
}
.appPage .slide-fade-leave-active {
  transition: all .5s ease;
}
.appPage .slide-fade-enter, .appPage .slide-fade-leave-to{
  transform: translateY(-80px);
}
</style>
<style lang="less">
.appPage .table-content {
  .ant-menu-horizontal{
    height: 30px;
    line-height: 20px;
  }

  .ant-menu-item{
    padding: 0 15px;
  }

  .view-dropdown{
    position: absolute;
    width: 180px;
    padding: 5px 0;
    border-radius: 3px;
    background: #fff;
    z-index: 11;
    box-shadow: 0 4px 20px rgb(0 0 0 / 13%), 0 2px 6px rgb(0 0 0 / 10%);

    ul{
      font-size: 13px;
      font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif!important;
      color: #333;

      li{
            cursor: pointer;
            height: 36px;
            line-height: 36px;
            vertical-align: middle;
            box-sizing: border-box;
            width: 100%;
            padding: 0 10px;
      }
      li:hover{
        background: #ecf5ff;
      }
    }
  }
}
.table-drawer{
  .ant-drawer-body{
    padding: 20px;
  }
}

.table-filter{
  width: 400px;
  .filter-head{
    font-size: 16px;
    color: #333;
    display: flex;
    height: 30px;
    padding: 5px 10px;
    align-items: center;
    justify-content: space-between;
  }

  .filter-item{
    height: 80px;
    border-bottom: 1px solid #dbdbdb;
    background: #f3f1f18f;
    span, input{
      color: #333 !important
    }    
  }
  
}
</style>